<template>
	<div class="services">
		<div class="pTitles">选择服务队伍</div>
		<el-select v-model="servicesTeam" style="width: 100%;" placeholder="请选择队伍">
			<!-- <el-option label="1" value="1"></el-option>
			<el-option label="2" value="2"></el-option> -->
		</el-select>
		<div class="pTitles">
			选择查看任务
			<el-select v-model="servicesTeam" style="width: 160px;float: right;margin-top: -6px;" placeholder="请选择任务">
				<!-- <el-option label="1" value="1"></el-option>
				<el-option label="2" value="2"></el-option> -->
			</el-select>
		</div>
		<el-table :data="tableData" style="width: 100%;margin-top: 10px;" border :header-cell-style="rowClass">
			<el-table-column label="开始时间" prop="name"></el-table-column>
			<el-table-column label="结束时间" prop="name1"></el-table-column>
			<el-table-column label="基地" prop="num"></el-table-column>
			<el-table-column label="基地位置" prop="rz"></el-table-column>
			<el-table-column label="联系人" prop="td"></el-table-column>
			<el-table-column label="联系号码" prop="address"></el-table-column>
			<el-table-column label="管理内容" prop="shop"></el-table-column>
			<el-table-column label="说明" prop="shopId"></el-table-column>
			<el-table-column label="任务状态" prop="zt"></el-table-column>
		</el-table>
		<div class="pTitles">成员任务考勤</div>
		<el-table :data="tableData" style="width: 100%;" border :header-cell-style="rowClass">
			<el-table-column label="姓名" prop="name"></el-table-column>
			<el-table-column label="工号" prop="name1"></el-table-column>
			<el-table-column label="职务" prop="num"></el-table-column>
			<el-table-column label="开始时间" prop="rz"></el-table-column>
			<el-table-column label="结束时间" prop="td"></el-table-column>
			<el-table-column label="出勤时长" prop="address"></el-table-column>
			<el-table-column label="出勤天数" prop="shop"></el-table-column>
			<el-table-column label="">
				<template slot-scope="scope">
				    <el-button type="text">个人考绩</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pTitles">队伍考勤小结</div>
		<el-table :data="tableData" style="width: 100%;" border :header-cell-style="rowClass">
			<el-table-column label="开始时间" prop="name"></el-table-column>
			<el-table-column label="结束时间" prop="name1"></el-table-column>
			<el-table-column label="联系人" prop="num"></el-table-column>
			<el-table-column label="职务" prop="rz"></el-table-column>
			<el-table-column label="总时长" prop="td"></el-table-column>
			<el-table-column label="总天数" prop="address"></el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				servicesTeam: '',
				tableData: [
					{
						name: '10月 08日周四',
						name1: '10月 16日周五',
						num: 'XXXX公司XXX基地',
						rz: '重庆市云阳县养鹿镇养鹿社区2组',
						td: '张涛',
						address: '183****1234',
						shop: '施肥管理 春肥',
						shopId: '需要背负喷雾器喷洒农药',
						zt: '未开始'
					}
				]
			}
		},
		methods: {
			rowClass({row, column, rowIndex, columnIndex}) {
				// if(columnIndex == 2){
					return 'background: #FAFAFA'
				// }
					// console.log(columnIndex) //表头行下标
				
			},
		}
	}
</script>

<style scoped="scoped">
	.pTitles {
		color: #303133;
		font-size: 14px;
		padding: 14px 0;
		margin-top: 15px;
	}
</style>
